<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>日报管理</el-breadcrumb-item>
                    <el-breadcrumb-item><span class="main-Clr-ft">日报填写</span></el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <div class="pl20 pr20">
                <el-card class="mb20 cardWidth">
                    <el-form :inline="true"  :model="formData" ref="formData" class="noMarginBottom">
                        <el-form-item  class="mb1">
                            <span>日期:</span>
                            <el-date-picker id = "dayId"
                                            style="width:70%"
                                            v-model="dayId"
                                            type="date"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            @change="Search()"
                                            placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="mb1">
                            <el-button @click="lastOrNextDay(-1)" size="small" class="bkmgColor">前一天</el-button>
                        </el-form-item>
                        <el-form-item class="mb1">
                            <el-button type="primary" @click="nowDay()" size="small" >今天</el-button>
                        </el-form-item>
                        <el-form-item class="mb1">
                            <el-button  @click="lastOrNextDay(1)" size="small" class="bkmgColor">后一天</el-button>
                        </el-form-item>
                        <el-form-item class="mb1">
                            <span v-if="confirmSet">
                                <el-button  type = "success" @click="copyAllData()" size="small" >复制到今天</el-button>
                            </span>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="mb20 cardWidth">
                    <div slot="header">
                        <span>日报填写</span>
                        <span style="color: red;">（总工时>=8h，建议填写工作内容时，不要填写编号，即使填写也会被处理掉。)</span>
                        <span style="margin-top: 25px; margin-left:15px; font-weight: bold;"> 总工时：{{LaborHour}} h</span>
                        <el-button  style="float: right; margin-right:5px; " type="text" @click="submitProduct()">提交</el-button>
                        <el-button  style="float: right; margin-right:15px; " type="text" @click="saveProduct()">保存</el-button>
                    </div>
                    <el-col :span="1">
                        <div class="fltLt">
                            <p><el-button  type="text" style="font-weight: bold;font-size: 18px" class="el-icon-plus" @click="addProductRow()" ></el-button></p>
                        </div>
                    </el-col>
                    <el-col :span="23">
                        <el-table
                                ref="multipleTable"
                                border
                                stripe
                                :header-cell-style="getRowClass"
                                tooltip-effect="dark"
                                :data="dayDetail.productDay">
                            <el-table-column  label="任务"  :prop="taskInfo" min-width="13%" height=200>
                                <template slot-scope="scope">
                                        <span v-if="scope.row.editSet">
                                            <el-select v-model="scope.row.taskInfo"  filterable ref="formData.productSelected" style="width:100px">
                                                <el-option
                                                        v-for="item in formData.TaskAll"
                                                        :label="item.value"
                                                        :value="item"
                                                        :key="item.code">
                                                </el-option>
                                            </el-select>
                                        </span>
                                    <span v-else>
                                            <div>{{scope.row.taskInfo.value}}</div>
                                        </span>
                                </template>
                            </el-table-column>

                            <el-table-column  label="任务分类"  :prop="taskTypeInfo" min-width="10%" height=200>
                                <template slot-scope="scope">
                                        <span v-if="scope.row.editSet">
                                            <el-select v-model="scope.row.taskTypeInfo" ref="formData.productSelected">
                                                <el-option
                                                        v-for="item in formData.workTypeSelected"
                                                        :label="item.value"
                                                        :value="item"
                                                        :key="item.code">
                                                </el-option>
                                            </el-select>
                                        </span>
                                    <span v-else>
                                            <div>{{scope.row.taskTypeInfo.value}}</div>
                                        </span>
                                </template>
                            </el-table-column>

                            <el-table-column  label="办公地点"  :prop="officeSpaceInfo" min-width="10%" height=200>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet">
                                        <el-select v-model="scope.row.officeSpaceInfo" ref="formData.productSelected">
                                            <el-option
                                                    v-for="item in formData.officeSpaceSelected"
                                                    :label="item.value"
                                                    :value="item"
                                                    :key="item.code">
                                            </el-option>
                                        </el-select>
                                    </span>
                                    <span v-else>
                                        <div>{{scope.row.officeSpaceInfo.value}}</div>
                                    </span>
                                </template>
                            </el-table-column>


                            <el-table-column  style="color: #2FB2B8;" label="工作内容"  :prop="workContent" min-width="25%" >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet">
                                        <el-input type="textarea" :autosize="{ minRows: 2}"  v-model="scope.row.workContent">
                                        </el-input>
                                    </span>
                                    <div  style="white-space:pre-wrap;" v-else>{{scope.row.workContent}}</div>
                                </template>
                            </el-table-column>

                            <el-table-column  style="color: #2FB2B8;" label="成果物"  :prop="deliverables" min-width="13%" >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet">
                                        <el-input type="textarea" :autosize="{ minRows: 2}"  v-model="scope.row.deliverables">
                                        </el-input>
                                    </span>
                                    <div  style="white-space:pre-wrap;" v-else>{{scope.row.deliverables}}</div>
                                </template>
                            </el-table-column>

                            <el-table-column  style="color: #2FB2B8;" label="工时"  :prop="laborHour" min-width="7%" >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet">
                                        <el-input @keyup.native="proving(scope.$index)" :autosize="{ minRows: 2}"  v-model="scope.row.laborHour">
                                        </el-input>
                                    </span>
                                    <div  style="white-space:pre-wrap;" v-else>{{scope.row.laborHour}} h</div>
                                </template>
                            </el-table-column>

                            <el-table-column   label="操作" min-width='10%' align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet">
                                        <el-button  title="删除" class="deleteButtonColor" type="text" size="small" @click="deleteRow(dayDetail.productDay,scope.$index)" icon="iconfont icon-shanchu"></el-button>
                                        <el-button  title="复制" type="text" style="font-weight: bold;font-size: 18px" icon="el-icon-tickets" @click="copyProductRow(scope.row,scope.$index)"></el-button>
                                    </span>
                                    <span v-else>
                                        <span v-if="scope.row.statesFlag == '1' || scope.row.statesFlag == '4'">
                                            <el-button  title="编辑" type="text" size="small" @click="editProductRow(scope.row,scope.$index)" icon="iconfont icon-bianji"></el-button>
                                            <el-button  title="删除" class="deleteButtonColor" type="text" size="small" @click="deleteRow(dayDetail.productDay,scope.$index)" icon="iconfont icon-shanchu"></el-button>
                                            <el-button  title="提交" class="submitButtonColor" type="text" size="small" @click="submitRow(dayDetail.productDay,scope.$index)" icon="el-icon-upload2"></el-button>
                                        </span>
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column  style="color: #2FB2B8;" label="状态"  :prop="statesFlag" min-width="8%" sortable>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.editSet" >
                                        <span style="display:none">
                                            <el-input type="textarea" :autosize="{ minRows: 2}"  v-model="scope.row.statesFlag" >
                                            </el-input>
                                        </span>
                                    </span>
                                    <div  style="white-space:pre-wrap;" v-else-if="scope.row.statesFlag == '1'">未提交</div>
                                    <div  style="white-space:pre-wrap;" v-else-if="scope.row.statesFlag == '2'">已提交</div>
                                    <div  style="white-space:pre-wrap;" v-else-if="scope.row.statesFlag == '3'">已审核</div>
                                    <div  style="white-space:pre-wrap;" v-else-if="scope.row.statesFlag == '4'">
                                        <el-button type="text" @click="rejectReasonRow(scope.row,scope.$index)" >已驳回</el-button>
                                        <el-dialog title="驳回信息" :visible.sync="dialogFormVisible" >
                                            <div>{{rejectReason}}</div>
                                        </el-dialog>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="24">
                        <div><br></div>
                    </el-col>
                </el-card>
            </div>
            <div class="bottomLayoutBus"></div>
        </el-container>
    </div>
</template>

<script>
    import urlConfig from '../../../config/url.json';
    import Vue from 'vue';
    import { Message } from 'element-ui';
    Vue.component(Message.name, Message);

    let productUrl=urlConfig.productManage;
    let dayDetailUrl = urlConfig.dayDetailManage;
    let addDayDetailUrl = urlConfig.addDayDetail;
    let saveDayDetailUrl = urlConfig.saveDayDetail;
    let sendMailUrl = urlConfig.sendMailUrl;

    export default {
        name: '',
        data() {
            return {
                dayId:'',
                dialogFormVisible: false,
                formData: {
                    userName:'',
                    confirmSet:'',
                    today:'',
                    copyDay:'',
                    officeSpaceSelected:[],
                    workTypeSelected:[],
                    TaskAll:[],
                    dialogFormData:[],
                    productSelected:[],
                    dialogFormData:[],
                    userAll:'',
                    userSelected:[]
                },
                dayDetail: {
                    productDay:[],
                },
                taskInfo:"",
                colid:"",
                taskTypeInfo:"",
                officeSpaceInfo:"",
                taskType:"",
                taskTypeInfo:"",
                productType:"",
                userInfo:"",
                workContent:"",
                officeSpace:"",
                deliverables:"",
                laborHour:"",
                LaborHour:"",
                statesFlag:"",
                rejectReason:"",
                roleId:""
            }
        },
        methods: {
            uuid() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";
                var uuid = s.join("");
                return uuid;
            },

            addProductRow() {// 定义初始变量
                let that= this;
                var dayId = document.getElementById("dayId").value;
                var showDayDate = new Date(dayId);
                var showDay = new Date();
                showDay.setDate(showDay.getDate() + 2);
                if(showDayDate > showDay){
                    Message.warning("请填写3天以内的日报！");
                    return;
                }
                if(that.roleId=="10003"){
                    var code = JSON.parse(that.STORAGE.getItem("userAll"))[0].code;
                    var value = JSON.parse(that.STORAGE.getItem("userAll"))[0].value;
                    var groupId = JSON.parse(that.STORAGE.getItem("userAll"))[0].groupId;

                    let j = {
                        'colid':'',
                        "taskInfo":{},
                        "taskTypeInfo":{},
                        "officeSpaceInfo":{},
                        "taskType":"",
                        "userInfo": [{"code":code,"value":value,"groupId":groupId},],
                        "userId": "",
                        "workContent": "",
                        "officeSpace":"",
                        "deliverables":"",
                        "laborHour":"",
                        "statesFlag":'1',
                        "rejectReason":"",
                        "dialogFormVisible":false,
                        "editSet": true,
                    };
                    that.dayDetail.productDay.splice(0,0,j);
                }else{
                    let j = {
                        'colid':'',
                        "taskInfo":{},
                        "taskTypeInfo":{},
                        "officeSpaceInfo":{},
                        "taskType":"",
                        "userInfo": [],
                        "userId": "",
                        "workContent": "",
                        "officeSpace":"",
                        "deliverables":"",
                        "laborHour":"",
                        "statesFlag":'1',
                        "rejectReason":"",
                        "dialogFormVisible":false,
                        "editSet": true,
                    };
                    that.dayDetail.productDay.splice(0,0,j);
                }
            },

            copyProductRow(row){
                let that= this;
                that.dayDetail.productDay.sel = row;
                let j = {
                    'colid':row.colid,
                    "taskInfo":{"code":row.taskInfo.code,"value":row.taskInfo.value},
                    "taskTypeInfo":{"code":row.taskTypeInfo.code,"value":row.taskTypeInfo.value},
                    "officeSpaceInfo":{"code":row.officeSpaceInfo.code,"value":row.officeSpaceInfo.value},
                    "taskType":row.taskType,
                    "userId": row.userId,
                    "workContent": "",
                    "officeSpace": row.officeSpace,
                    "deliverables": "",
                    "laborHour": "",
                    "statesFlag":'1',
                    "rejectReason":"",
                    "dialogFormVisible":false,
                    "editSet": true,
                }
                that.dayDetail.productDay.splice(0,0,j);
            },

            getRowClass({ rowIndex }) {
                if (rowIndex == 0) {
                    return 'background:#2FB2B8;color: white'
                } else {
                    return ''
                }
            },

            editProductRow(row) { //编辑
                let that= this;
                that.dayDetail.productDay.sel = row;
                row.editSet = true
            },

            rejectReasonRow(row) { //编辑

                let that=this;
                that.dayDetail.productDay.sel = row;
                that.rejectReason = row.rejectReason;
                that.dialogFormVisible = true
            },

            deleteRow(rows,index) { //删除
                let that=this;
                var dayId=document.getElementById("dayId").value;
                if(rows[index].colid==""){
                    rows.splice(index, 1);
                    Message.success("删除成功！")
                }else{
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                    });
                    that.$http({
                        method: 'delete',
                        url: dayDetailUrl,
                        baseURL:'/api',
                        data:{
                            'colid':rows[index].colid,
                            'dayId':dayId,
                            'groupId': JSON.parse(that.STORAGE.getItem("groupIdList"))[0].groupId,
                            'taskId':rows[index].taskInfo.code,
                            'userId':JSON.parse(that.STORAGE.getItem("loginData"))['id'],
                        }
                    }).then(function(response){
                        if(response.data.code==200){
                            that.queryDayDetail(dayId);
                            Message.success("删除日报成功！")
                        }
                        else{
                            Message.error('删除日报失败');
                        }
                        loading.close();
                    }).catch(function(err){
                        console.log(err);
                        Message.error('删除日报失败');
                        loading.close();
                    });
                }
            },

            submitRow(row,index) { //编辑
                let that= this;
                var arrList = new Array();
                arrList.push(row[index])
                that.submitDayDetail("1",arrList);
            },

            saveProduct(){ //保存校验
                let that = this;
                var arrList = new Array();
                that.dayId = document.getElementById("dayId").value;
                for(var i=0;i<that.dayDetail.productDay.length;i++){
                    if(that.dayDetail.productDay[i].editSet==true){
                        if(JSON.stringify(that.dayDetail.productDay[i].taskInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行任务！");
                            return;
                        }else if(JSON.stringify(that.dayDetail.productDay[i].taskTypeInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行任务分类！");
                            return;
                        }else if(JSON.stringify(that.dayDetail.productDay[i].officeSpaceInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行办公地点！");
                            return;
                        }else if(that.dayDetail.productDay[i].workContent==""){
                            Message.warning("请填写第" + (i+1) + "行工作内容！");
                            return;
                        }else if(that.dayDetail.productDay[i].workContent.length > 200){
                            Message.warning("第" + (i+1) + "行工作内容请少于200字！");
                            return;
                        }else if(that.dayDetail.productDay[i].deliverables==""){
                            Message.warning("请填写第" + (i+1) + "行成果物！");
                            return;
                        }else if(that.dayDetail.productDay[i].deliverables.length > 200){
                            Message.warning("第" + (i+1) + "行成果物请少于200字！");
                            return;
                        }else if(that.dayDetail.productDay[i].laborHour >= 24){
                            Message.warning("第" + (i+1) + "行工时必须小于24h！");
                            return;
                        }else if(that.dayDetail.productDay[i].laborHour <= 0){
                            Message.warning("第" + (i+1) + "行工时必须大于0h！");
                            return;
                        }else{
                            arrList.push(that.dayDetail.productDay[i])
                        }
                    }
                }
                if(arrList.length==0){
                    Message.warning("没有可保存的日报！")
                }else{

                    that.saveDayDetail("1",arrList);
                }
            },

            saveDayDetail(productType,arrList){ //保存
                let that=this;
                var dayId = document.getElementById("dayId").value;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                that.$http({
                    method: 'post',
                    url: saveDayDetailUrl,
                    baseURL:'/api',
                    data:{
                        'userId':JSON.parse(that.STORAGE.getItem("loginData"))['id'],
                        'groupId': JSON.parse(that.STORAGE.getItem("groupIdList"))[0].groupId,
                        'dayDetailList':arrList,
                        'dayId':dayId,
                        'productType':productType
                    }
                }).then(function(response){
                    if(response.data.code==200){
                        that.queryDayDetail(dayId);
                        Message.success("保存日报成功！")
                    }
                    else{
                        Message.error('保存日报失败');
                    }
                    loading.close();
                }).catch(function(err){
                    console.log(err);
                    Message.error('保存日报失败');
                    loading.close();
                });
            },

            submitProduct(){ //提交校验
                let that = this;
                var arrList = new Array();
                for(var i=0;i<that.dayDetail.productDay.length;i++){
                    if(that.dayDetail.productDay[i].editSet==true){
                        if(JSON.stringify(that.dayDetail.productDay[i].taskInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行任务！");
                            return;
                        }else if(JSON.stringify(that.dayDetail.productDay[i].taskTypeInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行任务分类！");
                            return;
                        }else if(JSON.stringify(that.dayDetail.productDay[i].officeSpaceInfo)=='{}'){
                            Message.warning("请选择第" + (i+1) + "行办公地点！");
                            return;
                        }else if(that.dayDetail.productDay[i].workContent==null){
                            Message.warning("请填写第" + (i+1) + "行工作内容！");
                            return;
                        }else if(that.dayDetail.productDay[i].workContent.length > 200){
                            Message.warning("第" + (i+1) + "行工作内容请少于200字！");
                            return;
                        }else if(that.dayDetail.productDay[i].deliverables==""){
                            Message.warning("请填写第" + (i+1) + "行成果物！");
                            return;
                        }else if(that.dayDetail.productDay[i].deliverables.length > 200){
                            Message.warning("第" + (i+1) + "行成果物请少于200字！");
                            return;
                        }else if(that.dayDetail.productDay[i].laborHour >= 24){
                            Message.warning("第" + (i+1) + "行工时必须小于24h！");
                            return;
                        }else if(that.dayDetail.productDay[i].laborHour <= 0){
                            Message.warning("第" + (i+1) + "行工时必须大于0h！");
                            return;
                        }
                    }if(that.dayDetail.productDay[i].statesFlag == 1 || that.dayDetail.productDay[i].statesFlag == 4){
                        arrList.push(that.dayDetail.productDay[i])
                    }
                }
                if(arrList.length==0){
                    Message.warning("没有可提交的日报！")
                }else{
                    that.submitDayDetail("1",arrList);
                }
            },

            submitDayDetail(productType,arrList){ //提交
                let that=this;
                var dayId = document.getElementById("dayId").value;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                that.$http({
                    method: 'post',
                    url: addDayDetailUrl,
                    baseURL:'/api',
                    data:{
                        'userId':JSON.parse(that.STORAGE.getItem("loginData"))['id'],
                        'groupId': JSON.parse(that.STORAGE.getItem("groupIdList"))[0].groupId,
                        'dayDetailList':arrList,
                        'dayId':dayId,
                        'productType':productType
                    }
                }).then(function(response){
                    if(response.data.code==200){
                        that.queryDayDetail(dayId);
                        Message.success("提交日报成功！")
                    }
                    else{
                        Message.error('提交日报失败');
                    }
                    loading.close();
                }).catch(function(err){
                    console.log(err);
                    Message.error('提交日报失败');
                    loading.close();
                });
            },

            nowDay(callback){ //查询今天
                let that = this;
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var showDay = "";
                if(month < 10 && day < 10){
                    showDay = year + "-" + 0 + month + "-" + 0 + day;
                }else if(month < 10 && day >= 10){
                    showDay = year + "-"  + 0 + month + "-"+ day;
                }else if(month >= 10 && day < 10){
                    showDay = year + "-" + month + "-" + 0 + day;
                }else if(month >= 10 && day >= 10){
                    showDay = year + "-" + month + "-"+ day;
                }
                that.dayId = showDay;
                that.today = showDay;
                that.queryDayDetail(that.dayId, callback);
            },

            lastOrNextDay(num){ //查询前/后一天
                let  that = this;
                var  showDay = that.dayId;
                if(!showDay)
                {
                    Message.warning("请先选中日期");
                    return;
                }
                var showDayDate = new Date(showDay);
                showDayDate.setDate(showDayDate.getDate() + num);
                var year = showDayDate.getFullYear();
                var month = showDayDate.getMonth() + 1;
                var day = showDayDate.getDate();
                var showDay = "";
                if(month < 10 && day < 10){
                    showDay = year + "-" + 0 + month + "-" + 0 + day;
                }if(month < 10 && day >= 10){
                    showDay = year + "-"  + 0 + month + "-" + day;
                }if(month >= 10 && day < 10){
                    showDay = year + "-" + month + "-" + 0 + day;
                }if(month >= 10 && day >= 10){
                    showDay = year + "-" + month + "-"+ day;
                }
                that.dayId = showDay;
                that.queryDayDetail(that.dayId);
            },

            // 只能输入数字且只有一位小数
            proving(e) {
                let  that = this;
                // 先把非数字的都替换掉，除了数字和.
                that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.replace(/[^\d.]/g, '');
                // 必须保证第一个为数字而不是.
                that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.replace(/^\./g, '');
                // 保证只有出现一个.而没有多个.
                that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.replace(/\.{2,}/g, '');
                // 保证.只出现一次，而不能出现两次以上
                that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
                // 最多输入两位整数
                that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.replace(/\d{3,}/g,'');
                if(that.dayDetail.productDay[e].laborHour.indexOf(".")< 0 && that.dayDetail.productDay[e].laborHour !=""){// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                    that.dayDetail.productDay[e].laborHour = parseFloat(that.dayDetail.productDay[e].laborHour);
                }
                for (let i in that.dayDetail.productDay[e].laborHour) {
                    if (that.dayDetail.productDay[e].laborHour[i] === '.') {
                        index = i
                    }
                    if (index !== -1) {
                        if (i - index > 1) {
                            that.dayDetail.productDay[e].laborHour = that.dayDetail.productDay[e].laborHour.substring(0, that.dayDetail.productDay[e].laborHour.length - 1)
                        }
                    }
                }
            },

            copyAllData(){
                let that = this;
                var arrList = new Array();
                arrList = that.dayDetail.productDay;
                let row = '';
                let length = arrList.length;
                that.nowDay(function(list){
                    for(var i=0;i<length;i++){
                        row = arrList[i];
                        let j = {
                            'colid':'',
                            "taskInfo":{"code":row.taskInfo.code,"value":row.taskInfo.value},
                            "taskTypeInfo":{"code":row.taskTypeInfo.code,"value":row.taskTypeInfo.value},
                            "officeSpaceInfo":{"code":row.officeSpaceInfo.code,"value":row.officeSpaceInfo.value},
                            "taskType":row.taskType,
                            "userId": row.userId,
                            "workContent": row.workContent,
                            "officeSpace": row.officeSpace,
                            "deliverables": row.deliverables,
                            "laborHour": row.laborHour,
                            "statesFlag":'1',
                            "rejectReason":row.rejectReason,
                            "dialogFormVisible":false,
                            "editSet": true,
                        };
                        that.dayDetail.productDay.splice(0,0,j);
                    }
                });
            },

            Search(){ //搜索
                let that = this;
                that.queryDayDetail(that.dayId);
            },

            queryDayDetail(dayId, callback){ //查询
                let that=this;
                if(dayId == that.today){
                    that.confirmSet = false;
                }else{
                    that.confirmSet = true;
                }

                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                that.$http({
                    method: 'post',
                    url: dayDetailUrl,
                    baseURL:'/api',
                    data:{
                        'userId':JSON.parse(that.STORAGE.getItem("loginData"))['id'],
                        'dayId':dayId
                    }
                }).then(function(response){
                    if(response.data.code==200){

                        that.dayDetail.productDay=response.data.data.productDayDetailList;
                        if(callback) callback(that.dayDetail.productDay);
                        that.calLaborHour();
                    }
                    else{
                        Message.error('获取数据失败');
                    }
                    loading.close();
                }).catch(function(err){
                    console.log(err);
                    Message.error('获取数据失败');
                    loading.close();
                });
            },

            calLaborHour(){ //计算总工时
                let that = this;
                that.LaborHour = 0;
                for(var i=0;i< that.dayDetail.productDay.length;i++){
                    that.LaborHour += Number(that.dayDetail.productDay[i].laborHour);
                }
            },
        },

        mounted() {
            let that=this;
            let officeSpaceSelected= [{
                code: "B01",
                value: "远程"
            }, {
                code: "B02",
                value: "现场"
            },{
                code: "B04",
                value: "公司"
            }];

            let workTypeSelected= [{
                code: "A01",
                value: "管理"
            }, {
                code: "A02",
                value: "评审"
            }, {
                code: "A03",
                value: "启动"
            }, {
                code: "A04",
                value: "需求"
            },{
                code: "A05",
                value: "开发"
            },{
                code: "A06",
                value: "设计"
            },{
                code: "A07",
                value: "测试"
            },{
                code: "A08",
                value: "上线"
            },{
                code: "A09",
                value: "部署"
            },{
                code: "A11",
                value: "验收"
            },{
                code: "A12",
                value: "维护"
            },{
                code: "A13",
                value: "其他"
            }];
            that.nowDay();
            that.formData.officeSpaceSelected= officeSpaceSelected;
            that.formData.workTypeSelected= workTypeSelected;
            that.formData.TaskAll= JSON.parse(that.STORAGE.getItem("TaskAll"));
            that.formData.userAll = JSON.parse(that.STORAGE.getItem("userAll"));
            that.roleId=JSON.parse(that.STORAGE.getItem("roleIdList"))[0]['id'];
        },
    }
</script>

<style scoped>
    .headerCoster{
        height: 59px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .deleteButtonColor{
        color: red;
    }

    .submitButtonColor{
        color: green;
    }

    .letBorder{
        border-left: #6aabe6 solid 1px;
    }


    .def-el-input{
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        width: 35%;
    }

    .cardWidth{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>